<template>
    <video class="sa-video" :src="checkUrl(url)" :width="size" :height="size" @click="previewVisible = true"></video>
    <el-dialog class="sa-dialog-video sa-dialog" v-model="previewVisible" fullscreen>
        <video :src="checkUrl(url)" controls></video>
    </el-dialog>
</template>
  
<script>
export default {
    name: 'SaVideo',
};
</script>
  
<script setup>
import { ref } from 'vue';
import { checkUrl } from '@/sheep/utils/checkUrlSuffix';

const props = defineProps(['url', 'size',]);

const previewVisible = ref(false);
</script>
  
<style lang="scss" scoped>
.sa-video {
    cursor: pointer;
}
</style>

<style lang="scss">
.sa-dialog-video {
    --el-dialog-bg-color: transparent;

    .el-dialog__header {
        border-bottom: none !important;
    }

    .el-dialog__headerbtn {
        top: 40px;
        right: 40px;
        font-size: 24px;
    }

    .el-dialog__close {
        color: #fff !important;
    }

    .el-dialog__body {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>
  